<template>
 <!-- 突发事件专报页面 -->
  <div class="commandReport" id="Emergencybrie">
    <div class="box" v-if="reportInfo">
      <div class="report-header">
        <h1>{{ reportInfo.reportTitle }}</h1>
        <p>(第{{ reportInfo.reportDate.split('-')[0] }}-{{reportInfo.periodNumber}}次)</p>
        <div class="headerLine">
          <span>{{ reportInfo.reportUnit }}</span>
          <span>{{ reportInfo.reportDate }}</span>
        </div>
      </div>
      <div class="report-content">
        <h2>{{ reportInfo.title }}</h2>
        <div class="content-first">
          <h3>一、事故经过</h3>
          <div class="firstItem">
            <span>事故时间：</span>
            <div>
              <p>{{ reportInfo.time }}</p>
            </div>
          </div>
          <div class="firstItem">
            <span>事故地点：</span>
            <div>
              <p>{{ reportInfo.place }}</p>
              <p>
                坐标：{{ reportInfo.lon }}°E,&nbsp;{{ reportInfo.lat }}°N
              </p>
            </div>
          </div>
          <div class="firstItem">
            <span>伤亡情况：</span>
            <div>
              <p>{{ reportInfo.hurt }}</p>
            </div>
          </div>
          <div class="firstItem">
            <span>死亡人员:</span>
            <div>
              <p>{{ reportInfo.death }}</p>
            </div>
          </div>
          <div class="firstItem">
            <span style="display:block">事故经过:</span>

            <div id="commandDescription" style="text-indent:20px;">
              <p class="accidentDsc" v-for="(item, index) of reportInfo.description" :key="index" v-html="item"></p>
            </div>
          </div>
        </div>
        <div class="content-second">
          <h3>二、事发地责任体系</h3>
          <div class="secondItem">
            <span>行政区划：</span>
            <div>
              <p>
                事发地属于：{{ reportInfo.govArea }}
              </p>
            </div>
          </div>
          <!-- <div class="secondItem">
            <span>区划概况：</span>
            <div>
              <span>乡镇/街道人口：</span>
              <span>自然村人口：</span>
              <span>事发地周边_公里人口：</span>
            </div>
          </div> -->
          <div class="secondItem tixi">
            <span>责任体系：</span>
            <h5> 表1 事发地各级行政区划负责人情况表 </h5>
            <el-table
              class="elTable"
              :data="reportInfo.dutyHuman">
              <el-table-column prop="xzqh" label="行政区划级别"></el-table-column>
              <el-table-column prop="type" label="责任人分类"></el-table-column>
              <el-table-column prop="name" label="姓名"></el-table-column>
              <el-table-column prop="tel" label="电话"></el-table-column>
              <el-table-column prop="remark" label="备注"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="content-third">
          <h3>三、作战辅助信息</h3>
          <div class="thirdItem" v-for="(itemOne, indexOne) of tableRule" :key="indexOne" >
            <h4> （{{ daxie[indexOne] }}）{{itemOne.bigTitle}}
              <!-- <span v-show="itemOne.children.length === 0">无</span> -->
            </h4>
            <div class="tableBox" v-for="(itemTwo, indexTwo) of itemOne.children" :key="indexTwo" >
              <h5> {{itemTwo.num}} 事发地方圆{{ radius }}公里内{{ itemTwo.smallTitle }}情况表 </h5>
              <el-table class="elTable" :data="reportInfo[itemTwo.dataKey]">
                <el-table-column
                  label="序号"
                  type="index"
                  :index='(index)=>{return (index + 1)}'>
                </el-table-column>
                <el-table-column
                  v-for="(itemTheader, indexTheader) of itemTwo.header"
                  :key="indexTheader"
                  :prop="itemTheader.prop"
                  :label="itemTheader.label"
                >
                </el-table-column>
              </el-table>
              <p> 注：本表为方圆{{ radius }}公里内前10位距事发点距离最短的{{ itemTwo.type }} </p>
            </div>
          </div>
        </div>
        <div class="content-forth" v-if="reportInfo.imgUrl">
          <h3>四、作战地图</h3>
          <img :src="reportInfo.imgUrl" alt="" />
          <p>图1-1 事发地遥感卫星影像图</p>
        </div>
      </div>
      <div class="report-footer">
        <div class="footerLine">
          <span>海南省应急管理厅</span>
          <span>编辑:{{ reportInfo.reporter }}</span>
        </div>
      </div>
    </div>
    <div class="funcBtn">
      <p @click="loadReport()" :style="{ cursor: countDown > 0 ? 'not-allowed' : 'pointer' }" >
        <img class="mouseout" src="/images/fireReport/icon/xiazai.png" alt="" />
        <img class="mousein" src="/images/fireReport/icon/xiazai2.png" alt="" />下载<span v-show="countDown > 0">({{ countDown }})</span>
      </p>
      <p @click="closePreview(false)">
        <img class="mouseout" src="/images/fireReport/icon/close.png" alt="" />
        <img class="mousein" src="/images/fireReport/icon/close2.png" alt="" />关闭
      </p>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    props:['radius',"eventInfo"],
  // 作战指挥简报
  name:"commandReport",
  data(){
    return{
      //radius:3,//范围半径
      countDown:0,
      reportInfo:null,//报告数据
      daxie:["一", "二", "三", "四", "五"],
      tableRule:[
        {
          bigTitle:"周边救援力量",
          children:[
            {
              num:"表2",
              smallTitle:"救援队伍",
              dataKey:"rescueTeam",
              header:[
                { prop:"type", label:"队伍类别"},
                { prop:"name", label:"队伍名称"},
                { prop:"site", label:"队伍人数"},
                { prop:"tel", label:"联系电话"},
              ]
            },
            {
              num:"表3",
              smallTitle:"医疗保障资源",
              dataKey:"medicalSecurities",
              header:[
                { prop:"type", label:"医疗资源类别"},
                { prop:"name", label:"医疗资源名称"},
                { prop:"site", label:"医疗资源位置"},
                { prop:"tel", label:"联系电话"},
              ]
            },
          ]
        },
        {
          bigTitle:"周边救援物资",
          children:[
            {
              num:"表4",
              smallTitle:"救援物资",
              dataKey:"reliefGoods",
              header:[
                { prop:"type", label:"救援物资类别"},
                { prop:"name", label:"救援物资名称"},
                { prop:"site", label:"救援物资位置"},
                { prop:"tel", label:"联系电话"},
              ]
            },
          ]
        },
        {
          bigTitle:"重点防护目标",
          children:[
            {
              num:"表5",
              smallTitle:"重点防护目标",
              dataKey:"protectAim",
              header:[
                { prop:"type", label:"防护目标类别"},
                { prop:"name", label:"防护目标名称"},
                { prop:"site", label:"防护目标位置"},
                { prop:"tel", label:"联系电话"},
              ]
            },
          ]
        },
      ],
    }
  },
  watch:{
    eventInfo:{
      handler(val){
        console.log(val)
        this.getEventData();
      },
      deep:true,
      immediate:true,
    },
  },
  methods:{
    // 获取数据
    getEventData(){
      console.log(this.eventInfo)
      let id = this.eventInfo.id;
      let lon = this.eventInfo.lon;
      let lat = this.eventInfo.lat;
      let radius = ""
      if(this.eventInfo.radius){
        radius = this.eventInfo.radius * 1000;
        this.radius = this.eventInfo.radius
      }else{
        radius = this.radius * 1000;
      }
      axios.get(`${sjzxUrl}/api/disaster/nearby`,{params:{ id, lon, lat, radius}}).then(res=>{
        this.reportInfo = res.data.data;
        this.reportInfo.imgUrl = this.eventInfo.imgUrl
        console.log(this.reportInfo)
      })
    },
    // 关闭报告
    closePreview(){
      this.$emit('closeReport', false)
    },
    // 专报下载
    loadReport(){
        let id = this.eventInfo.id;
        let lon = this.eventInfo.lon;
        let lat = this.eventInfo.lat;
        let radius = this.radius * 1000;
        let base64str = this.eventInfo.imgUrl;
        console.log(this.eventInfo.imgUrl)
        let obj = JSON.parse(JSON.stringify(this.reportInfo))
    
        let descriptionArr = [];
        let dom = document.querySelectorAll("#commandDescription p");
        console.log(dom);
        dom.forEach((item) => {
            console.log(item.textContent)
            descriptionArr.push(item.textContent);
        });
        obj.description = descriptionArr;
        axios({
            url:`${sjzxUrl}/api/disaster/download/briefReport`,
            method:"post",
            data:
            {
                briefReportVo:obj,
                base64str
            },
            responseType: 'blob'
        }).then(res=>{
            this.download(res.data);
        });
    },
    // 下载文件
    download (data) {
      let url = URL.createObjectURL(new Blob([data],{type: "application/vnd.ms-excel;charset=utf-8 "}))
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', "突发事件简报.docx")
      document.body.appendChild(link)
      link.click()
    },
  },
}
</script>
<style lang="stylus">

.commandReport{
    .accidentDsc{
        p{
            color:#000;
            white-space:inherit;
        }
        p:nth-child(1){
            text-indent: 1em!important;
        }
    }
  .el-table .cell{
    color:#000;
  }
  .elTable{
    width:90%;
    margin:auto;
    border:0;
    border-left:1px solid #000;
    border-top:1px solid #000;
    margin-bottom:20px;
    th, tr, td{
      color:#000;
      border: 0;
      border-right:1px solid #000;
      border-bottom:1px solid #000;
      font-size: 16px;
      font-family: FangSong;
    }
    tbody tr:hover>td { 
      background-color:unset!important
    }
  }
}
</style>
<style lang="stylus" scoped>
.commandReport{
  position: fixed;
  left: 0;
  top: 0;
  right:0;
  bottom: 0;
  z-index:303;
  margin:auto;
  width: vw(1000);
  height:vh(900);
  background: rgba(255, 255, 255, 1);
  line-height:46px;
  .box{
    width:100%;
    height:100%;
    overflow: auto;
    padding: 50px;
    font-family:'FangSong';
    line-height:40px;
    .report-header{
      border-bottom: 2px solid #fe0000;
      text-align: center;
      color: #000;
      h1{
        font-size: 48px;
        color:#ff0000;
        font-family: SimHei;
      }
      p{
        font-size: 21px;
        line-height:21px;
        margin: 68px 0 70px;
        color: #000;
      }
      .headerLine{
        font-size: 21px;
        line-height:45px;
        display: flex;
        justify-content: space-between;
        border-bottom:5px solid #fe0000;
        margin-bottom:1px;
        span{
          color:#000;
        }
      }
    }
    .report-content{
      font-size: 21px;
      color: #000;
      h2, h3, h4, h5{
        font-weight: 900;
        color: #000;
      }
      h2{
        font-size: 29px;
        line-height:29px;
        text-align: center;
        font-family: SimHei;
        margin:64px 0 69px;
        color: #000;
      }
      h3{
        font-size: 21px;
        font-family: SimHei;
      }
      h4{
        font-size: 21px;
        text-indent: 2em;
      }
      h5{
        font-size: 16px;
        text-align: center;
        line-height:22px;
      }
      .firstItem, .secondItem{
        display: flex;
        justify-content: flex-start;
        color: #000;
        div{
            color:#000;
            p{
                color:#000;
            }
        }
        span{
          text-indent: 2em; 
          white-space: nowrap;
          font-weight: 900;
          color: #000;
          font-size: 21px;
        }
      }
      .tixi{
        flex-direction:column;
      }
      .content-third .thirdItem .tableBox{
          color: #000;
        p{
          font-size: 16px;
          line-height:36px;
          text-indent: 5em;
          color: #000;
        }
      }
      .content-forth{
        img{
          width:100%;
          height:auto;
          margin:auto;
          display: block;
        }
        p{
          font-size: 16px;
          text-align: center;
          line-height:50px;
          color: #000;
        }
      }
      
    }
    .report-footer{
      padding-top:1px;
      border-top: 2px solid #fe0000;
      color: #000;
      .footerLine{
        font-size: 21px;
        display: flex;
        justify-content: space-between;
        border-top:5px solid #fe0000;
      }
    }
  }
  .funcBtn{
    color:#fff;
    padding-top:5px;
    position:absolute;
    bottom:-35px;
    right:10px;
    text-align:center;
    p{
      float:right;
      margin-left: 20px;
      cursor: pointer;
      width: 102px;
      height: 30px;
      line-height: 30px;
      font-size: 18px;
      opacity: 1;
      background: #042039;
      border: 1px solid #17d0ff;
      border-radius: 3px;
      color: #17d0ff;
      img{
        width:18px;
        height:18px;
        vertical-align: middle;
        margin-right:8px;
      }
      .mousein{
        display:none;
      }
    }
    p:hover{
      background: #05718c;
      color:#fff;
      .mousein{
        display:inline-block;
      }
      .mouseout{
        display:none;
      }
    }
  }
}
</style>